<template>
<h2>
    首页
</h2>
 <div v-if="isShow">
    当前计数:{{ count }}
 </div>
 

<li v-for="(item, index) in lists" :key="index">
  {{ item }}
</li>
 <button type="button" @click = ClickButton>自增</button>
 <button type="button" @click = isShowButton>显示</button>
</template>
<script setup lang="ts">
    import {ref,onMounted, watch} from 'vue' 
    const isShow = ref(true)
    const  count = ref(0)
    const lists =['vue指令','ref响应式','路由跳转']
    function ClickButton(){
        count.value++
    }
    function isShowButton(){
        isShow.value = !isShow.value
    }
    onMounted(() => {
        console.log('页面挂在完成')
    })
    watch(count ,function(newCount,OldCount){
        console.log("计数变化:旧值:" ,OldCount,"新值:" ,newCount)
    }

    )
</script>
<style scoped>
button{
    background-color: aqua;
    padding:10px;
    font-size:40px;
}
</style>